<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流动边框卡片</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.card {
	    width: 190px;
	    height: 254px;
	    background: #07182E;
	    position: relative;
	    display: flex;
	    place-content: center;
	    place-items: center;
	    overflow: hidden;
	    border-radius: 20px;
	}
	
	.card h2 {
	    z-index: 1;
	    color: white;
	    font-size: 2em;
	}
	
	.card::before {
	    content: '';
	    position: absolute;
	    width: 100px;
	    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
	    height: 130%;
	    animation: rotBGimg 3s linear infinite;
	    transition: all 0.2s linear;
	}
	
	@keyframes rotBGimg {
	    from {
	        transform: rotate(0deg);
	    }
	
	    to {
	        transform: rotate(360deg);
	    }
	}
	
	.card::after {
	    content: '';
	    position: absolute;
	    background: #07182E;
	    ;
	    inset: 5px;
	    border-radius: 15px;
	}
	
	/* .card:hover:before {
	    background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
	    animation: rotBGimg 3.5s linear infinite;
	  } */
</style>
<body>
    <div class="card">
        <h2>CARD</h2>
    </div>
</body>

</html>